<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>模板</title>
    <style type="text/css">
      /* ************************************************************** */
      html:root {
        --box-width: 350px;
        --box-height: fit-content;
      }
      /* ************************************************************** */
      /* ************************************************************** */
      .shape-simple {
        float: left;
        height: 50px;
        width: 50px;
        padding: 10px;
        margin: 10px;
        background-color: deepskyblue;
        border: 10px solid deepskyblue;
        border-radius: 50%;
        background-clip: content-box;
      }
      .pure-shape-simple {
        height: 100px;
        width: 100px;
        float: left;
        background-color: rgba(0, 0, 0, 0.1);
      }

      .case1-checkbox1 input:nth-of-type(1):checked ~ div .case1-1 {
        shape-outside: none;
      }
      .case1-checkbox1 input:nth-of-type(2):checked ~ div .case1-1 {
        shape-outside: margin-box;
      }
      .case1-checkbox1 input:nth-of-type(3):checked ~ div .case1-1 {
        shape-outside: padding-box;
      }
      .case1-checkbox1 input:nth-of-type(4):checked ~ div .case1-1 {
        shape-outside: border-box;
      }
      .case1-checkbox1 input:nth-of-type(5):checked ~ div .case1-1 {
        shape-outside: content-box;
      }

      .case1-2 {
        shape-outside: circle(50% at 0% 50%);
      }
      .case1-3 {
        shape-outside: ellipse(75% 25% at 0% 50%);
      }
      .case1-4 {
        shape-outside: inset(25% 50% 25% 25% round 10px);
      }
      .case1-5 {
        height: 200px;
        width: 200px;
        background-color: currentColor;
        /* 跨域 */
        shape-outside: url(../../Source/bird.png);
        -webkit-mask: url(../../Source/bird.png) no-repeat;
        mask: url(../../Source/bird.png) no-repeat;
      }
      .case3-1 {
        shape-outside: radial-gradient(75% 75% at top left, blue 1%, transparent);
        background-image: radial-gradient(75% 75% at top left, blue 1%, transparent);
      }
      :checked + div .case3-1 {
        shape-image-threshold: 0.5;
      }
      /* ************************************************************** */
      /* ************************************************************** */
    </style>
  </head>
  <body>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <header>
      <a href="./19-网格布局.html">上一篇</a>
      <a href="./21.@media适配.html">下一篇</a>
    </header>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <section class="demo-box">
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>shape-outside</dt>
        <dd>
          <p><i>语法</i></p>
          <p>该属性需要配合float，支持以下四种值</p>
          <ul>
            <li>
              <p><b>none</b></p>
              <p>默认值</p>
            </li>
            <li>
              <p><b>&lt;shape-box&gt;</b></p>
              <p>包括margin-box/padding-box/border-box/content-box</p>
            </li>
            <li>
              <p><b>&lt;basic-shape&gt;</b></p>
              <p>基本图形，和clip-path支持一致</p>
            </li>
            <li>
              <p><b>&lt;image&gt;</b></p>
              <p>图像</p>
            </li>
          </ul>
          <section class="case1-checkbox1">
            <p>
              <i>1、关键字：auto | &lt;shape-box&gt;</i>
            </p>
            <input type="radio" name="case1-checkbox1" value="1" />
            none
            <br />
            <input type="radio" name="case1-checkbox1" value="2" />
            margin-box
            <br />
            <input type="radio" name="case1-checkbox1" value="3" />
            padding-box
            <br />
            <input type="radio" name="case1-checkbox1" value="4" />
            border-box
            <br />
            <input type="radio" name="case1-checkbox1" value="5" />
            content-box
            <div>
              <span class="shape-simple case1-1"></span>
              <p>
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字
              </p>
            </div>
          </section>
          <section>
            <p><i>2、基本图形</i></p>
            <ul>
              <li>
                <p><b>circle()</b></p>
                <p><i>语法</i></p>
                <pre><code>circle([ &lt;shape-radius&gt; ]? [ at &lt;position&gt; ]?)</code></pre>
                <div>
                  <span class="pure-shape-simple case1-2"></span>
                  <p>
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                  </p>
                </div>
              </li>
              <li>
                <p><b>ellipse()</b></p>
                <p><i>语法</i></p>
                <pre><code>ellipse([ &lt;shape-radius&gt;{2} ]? [ at &lt;position&gt; ]?)</code></pre>
                <div>
                  <span class="pure-shape-simple case1-3"></span>
                  <p>
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                  </p>
                </div>
              </li>
              <li>
                <p><b>inset()</b></p>
                <p><i>语法</i></p>
                <pre><code>inset([ &lt;shape-args&gt;{0, 4} ] [ round &lt;border-radius&gt; ]?)</code></pre>
                <p>
                  &lt;shape-args&gt;必须存在，四个值指顺时针方向向内偏移的大小。
                </p>
                <div>
                  <span class="pure-shape-simple case1-4"></span>
                  <p>
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                    文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                  </p>
                </div>
              </li>
              <li>
                <p><b>polygon()</b></p>
                <p><i>语法</i></p>
                <pre><code>polygon([ &lt;fill-rules&gt;, ]? [ &lt;shape-args&gt; &lt;shape-args&gt; ])</code></pre>
                <p>
                  &lt;shape-args&gt;必须存在，四个值指顺时针方向向内偏移的大小。
                </p>
              </li>
            </ul>
          </section>
          <section>
            <i>3、图像类</i>
            <p>
              图像和渐变，会自动识别透明区域；图像必须在服务器端，否则会报
              <b>跨域</b>；且不能调整大小
            </p>
            <div>
              <span class="pure-shape-simple case1-5"></span>
              <p>
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字
                文字文字文字文字文字文字文字文字文字文字文字文字文字文字
              </p>
            </div>
          </section>
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>shape-margin</dt>
        <dd>就是控制文字与环绕元素间的间距</dd>
        <dd>
          <p>
            <i>
              与真正的margin的区别
            </i>
          </p>
          只能有一个值，且取值范围是0-浮动元素边界
        </dd>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
      <dl>
        <dt>shape-image-threshold</dt>
        <dd>
          <p>由于默认是0（完全透明）才能被文字环绕，这个属性可以调整该阈值</p>
        </dd>
        <input type="checkbox"> 设置为0.5
        <div>
          <span class="pure-shape-simple case3-1"></span>
          <p>
            文字文字文字文字文字文字文字文字文字文字文字文字文字文字
            文字文字文字文字文字文字文字文字文字文字文字文字文字文字
            文字文字文字文字文字文字文字文字文字文字文字文字文字文字
            文字文字文字文字文字文字文字文字文字文字文字文字文字文字
          </p>
        </div>
      </dl>
      <!-- *-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*- -->
    </section>
    <!-- ------------------------------------------------------------->
    <!-- ------------------------------------------------------------->
    <link rel="stylesheet" href="./0-模板.css" />
    <link
      rel="stylesheet"
      href="../../Module/hightlight/styles/hybrid.min.css"
    />
    <script src="../../Module/hightlight/highlight.min.js"></script>
    <script>
      hljs.highlightAll()
    </script>
  </body>
</html>
